@extends('admin/common')

@section('content')
    <article class="page-container">
        <form class="form form-horizontal" id="form-admin-add">
            <input type="hidden" name="id" value="{{ isset($id) ? $id : '' }}">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" id="name" name="name" value="{{ isset($product_info['name']) ? $product_info['name'] : '' }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="{{ isset($product_info['description']) ? $product_info['description'] : '' }}" placeholder="" id="description" name="description">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>团购价格：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" id="price" name="price" value="{{ isset($product_info['price']) ? $product_info['price'] : '' }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>原价格：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" id="price_old" name="price_old" value="{{ isset($product_info['price_old']) ? $product_info['price_old'] : '' }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>库存: </label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" placeholder="" id="nums" name="nums" value="{{ isset($product_info['nums']) ? $product_info['nums'] : '' }}">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"> 缩略图：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list"></div>
                    <div id="filePicker">选择图片</div>
                </div>
                <input type="hidden" name="thumb_img" id="thumb_img" value="{{ isset($product_info['thumb_img']) ? $product_info['thumb_img'] : '' }}">
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"> 产品图：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <!--用来存放item-->
                    <div id="fileList1" class="uploader-list"></div>
                    <div id="filePicker1">选择图片</div>
                </div>
                <input type="hidden" name="pro_img" id="pro_img" value="{{ isset($product_info['pro_img']) ? $product_info['pro_img'] : '' }}">
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"> 开始时间：</label>
                <input type="text" onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="datemin" class="input-text Wdate" style="margin-left:18px; width:180px;" name="datemin" value="{{ isset($product_info['datemin']) ? $product_info['datemin'] : '' }}">
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"> 结束时间：</label>
                <input type="text" onfocus="WdatePicker({ dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'datemin\')}' })" id="datemax" class="input-text Wdate" style="margin-left:18px; width:180px;" name="datemax" value="{{ isset($product_info['datemax']) ? $product_info['datemax'] : '' }}">
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">内容：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <script id="container" name="content" type="text/plain">

                    </script>
                </div>
                <textarea name="" id="content_t" cols="30" rows="10" style="display: none">
                    {{ isset($product_info['content'])?$product_info['content']:'' }}
                </textarea>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>
@endsection

@section('script')
    <script type="text/javascript" src="{{ asset('admin/lib/jquery.validation/1.14.0/jquery.validate.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/jquery.validation/1.14.0/validate-methods.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/jquery.validation/1.14.0/messages_zh.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/webuploader/0.1.5/webuploader.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('admin/lib/webuploader/0.1.5/webuploader.css') }}">
    <script type="text/javascript" src="{{ asset('admin/lib/ueditor/1.4.3/ueditor.config.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/ueditor/1.4.3/ueditor.all.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('admin/lib/My97DatePicker/4.8/WdatePicker.js') }}"></script>
    <script type="text/javascript">
        $(function(){
            $('.skin-minimal input').iCheck({
                checkboxClass: 'icheckbox-blue',
                radioClass: 'iradio-blue',
                increaseArea: '20%'
            });

            //图片上传
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '{{ asset('admin/lib/webuploader/0.1.5/Uploader.swf') }}',
                // 文件接收服务端。
                server: '{{ URL::to('admin/product/upload') }}',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }

            });
            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '<div class="info">' + file.name + '</div>' +
                                '</div>'
                        ),
                        $img = $li.find('img');

                // $list为容器jQuery实例
                $('#fileList').append( $li );

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, 100, 100 );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }
                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file, res ) {
                $( '#'+file.id ).addClass('upload-state-done');
                //把文件路径传到表单
                if(res.code == 1){
                    $('#thumb_img').val(res.file);
                }
            });
            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');
                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }
                $error.text('上传失败');
            });
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });

            //图片上传1
            var uploader1 = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '{{ asset('admin/lib/webuploader/0.1.5/Uploader.swf') }}',
                // 文件接收服务端。
                server: '{{ URL::to('admin/product/upload') }}',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker1',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }

            });
            // 当有文件添加进来的时候
            uploader1.on( 'fileQueued', function( file ) {
                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '<div class="info">' + file.name + '</div>' +
                                '</div>'
                        ),
                        $img = $li.find('img');

                // $list为容器jQuery实例
                $('#fileList1').append( $li );

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                uploader1.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, 100, 100 );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader1.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');
                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }
                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader1.on( 'uploadSuccess', function( file, res ) {
                $( '#'+file.id ).addClass('upload-state-done');
                //把文件路径传到表单
                if(res.code == 1){
                    var v = $('#pro_img').val();
                    if(v == ''){
                        $('#pro_img').val(res.file);
                    }else{
                        v += ','+res.file;
                        $('#pro_img').val(v);
                    }
                }
            });
            // 文件上传失败，显示上传出错。
            uploader1.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');
                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }
                $error.text('上传失败');
            });
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader1.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });

            //编辑器
            var ue = UE.getEditor('container',{
                toolbars: [
                    ['fullscreen', 'source', 'undo', 'redo'],
                    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
                ]
            });
            ue.ready(function() {
                //设置编辑器的内容
                ue.setContent($('#content_t').val());
            });

            //验证
            $("#form-admin-add").validate({
                rules:{
                    name : {
                        required:true,
                        minlength:1,
                    }
                },
                onkeyup : false,
                focusCleanup : true,
                success : "valid",
                submitHandler:function(form){
                    $(form).ajaxSubmit({
                        type : 'post',
                        url : "{{ URL::to('admin/product/addProductPost') }}" ,
                        success : function(ret){
                            if(ret.code == 1){
                                layer.msg(ret.msg,{icon:1,time:1000},function(){
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.$('.btn-refresh').click();
                                    parent.layer.close(index);
                                });
                            }else{
                                layer.msg(ret.msg,{icon:1,time:1000});
                            }
                        },
                        error : function(XmlHttpRequest, textStatus, errorThrown){
                            layer.msg('error!',{icon:1,time:1000,shift: -1});
                        }
                    });
                }
            });
        });
    </script>
@endsection
